<!--
 *Author：jxx
 *Contact：283591387@qq.com
 *业务请在@/extension/wms/wms.huo/shipment.jsx或shipment.vue文件编写
 *新版本支持vue或【表.jsx]文件编写业务,文档见:https://v3.volcore.xyz/docs/view-grid、https://v3.volcore.xyz/docs/web
 -->
<template>
    <view-grid ref="grid"
               :columns="columns"
               :detail="detail"
               :details="details"
               :editFormFields="editFormFields"
               :editFormOptions="editFormOptions"
               :searchFormFields="searchFormFields"
               :searchFormOptions="searchFormOptions"
               :table="table"
               :extend="extend"
               :onInit="onInit"
               :onInited="onInited"
               :searchBefore="searchBefore"
               :searchAfter="searchAfter"
               :addBefore="addBefore"
               :updateBefore="updateBefore"
               :rowClick="rowClick"
               :modelOpenBefore="modelOpenBefore"
               :modelOpenAfter="modelOpenAfter">
        <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
        <template #gridHeader>
        </template>
    </view-grid>
</template>
<script setup lang="jsx">
    import extend from "@/extension/wms/wms.huo/shipment.jsx";
    import viewOptions from './shipment/options.js'
    import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
    const grid = ref(null);
    const { proxy } = getCurrentInstance()
    //http请求，proxy.http.post/get
    const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())

    let gridRef;//对应[表.jsx]文件中this.使用方式一样
    //生成对象属性初始化
    const onInit = async ($vm) => {
        gridRef = $vm;
        //与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
        //更多属性见：https://v3.volcore.xyz/docs/view-grid
    }
    //生成对象属性初始化后,操作明细表配置用到
    const onInited = async () => {
        // 将订单编号设置为远程搜索下拉框
        const orderField = editFormOptions.flat().find(x=>x.field==='order_no')
        if(orderField){
            orderField.remote = true
            orderField.data = []
            orderField.placeholder = '输入订单编号搜索'
            orderField.onChange = async (val)=>{
                if(!val){return}
                const res = await proxy.http.get('api/so_order/getOrderDetail?orderNo='+encodeURIComponent(val),null,false)
                if(res && res.status && res.data){
                    // 回显订单相关字段
                    editFormFields.order_no = res.data.order_no
                    editFormFields.product_name = res.data.product_name
                    editFormFields.Num = res.data.Num
                    editFormFields.Address = res.data.Address
                }
            }
            // 自定义远程查询方法(适配VolForm的remote模式)
            const _remote = async (keyword)=>{
                const list = await proxy.http.get('api/so_order/getOrderOptions?keyword='+encodeURIComponent(keyword||''),null,false)
                orderField.data = (list && list.status && Array.isArray(list.data))? list.data.map(x=>({key:x.key,value:x.value})) : []
            }
            // 给一个初始remote方法引用，VolForm内部会调用remoteSearch(item,...)
            orderField.url = '_custom_remote_'
            orderField.remoteMethod = _remote
            // 兼容：首次打开时不加载，输入才加载
        }
    }
    const searchBefore = async (param) => {
        //界面查询前,可以给param.wheres添加查询参数
        //返回false，则不会执行查询
        return true;
    }
    const searchAfter = async (rows, result) => {
        return true;
    }
    const addBefore = async (formData) => {
        //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
        return true;
    }
    const updateBefore = async (formData) => {
        //编辑保存前formData为对象，包括明细表、删除行的Id
        return true;
    }
    const rowClick = ({ row, column, event }) => {
        //查询界面点击行事件
        // grid.value.toggleRowSelection(row); //单击行时选中当前行;
    }
    const modelOpenBefore = async (row) => {//弹出框打开后方法
        return true;//返回false，不会打开弹出框
    }
    const modelOpenAfter = (row) => {
        //弹出框打开后方法,设置表单默认值,按钮操作等
    }
    //监听表单输入，做实时计算
    //watch(() => editFormFields.字段,(newValue, oldValue) => {	})
    //对外暴露数据
    defineExpose({})
</script>
<style lang="less" scoped>
</style>
